<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <style>
        .tip {
            font-size: 12px;
            color: deeppink;
            margin-left: 10px;
        }

        .success {
            font-size: 12px;
            color: green;
            margin-left: 10px;
        }

        .fail {
            font-size: 12px;
            color: red;
            margin-left: 10px;
        }
    </style>
    <script>
        function tipUsername() {
            document.getElementById("s1").innerHTML = "用户名由英文字母、数字、下划线组成,长度为4-16个字符";
            document.getElementById("s1").className = "tip";
        }

        function checkUsername() {
            let username = document.getElementById("username").value;
            let s1 = document.getElementById("s1");
            let regExp = /^\w{4,16}$/;
            if (regExp.test(username)) {
                s1.innerHTML = "用户名格式正确";
                s1.className = "success";
                return true;
            } else {
                s1.innerHTML = "用户名格式不正确";
                s1.className = "fail";
                return false;
            }
        }

        function tipPhone() {
            document.getElementById("s2").innerHTML = "手机号码由11位数字组成,必须以13、15、16、18、19开头";
            document.getElementById("s2").className = "tip";
        }

        function checkPhone(){
            let phone = document.getElementById("phone").value;
            let s2 = document.getElementById("s2");
            let regExp = /^[1][35689]\d{9}$/;
            if (regExp.test(phone)) {
                s2.innerHTML = "手机号码格式正确";
                s2.className = "success";
                return true;
            } else {
                s2.innerHTML = "手机号码格式不正确";
                s2.className = "fail";
                return false;
            }
        }

        function tipPersonId() {
            document.getElementById("s3").innerHTML = "身份证号码只能是15位或者18位字符,如果是15位,要求必须全部是数字,如果是18位,要求前17位必须全部是数字,最后一位可以是数字或者X";
            document.getElementById("s3").className = "tip";
        }

        function checkPersonId(){
            let personId = document.getElementById("personId").value;
            let s3 = document.getElementById("s3");
            let regExp = /^\d{15}(\d{2}[0-9x])?$/i;
            if (regExp.test(personId)) {
                s3.innerHTML = "身份证号码格式正确";
                s3.className = "success";
                return true;
            } else {
                s3.innerHTML = "身份证号码格式不正确";
                s3.className = "fail";
                return false;
            }
        }

        function tipEmail() {
            document.getElementById("s4").innerHTML = "要求邮箱必须以英文字母或者数字开头,后面可以跟英文字母数字或者下划线,后面跟@符号,@符号后面跟英文字母或者数字,以.com或者.com.cn结尾";
            document.getElementById("s4").className = "tip";
        }

        function checkEmail(){
            let email = document.getElementById("email").value;
            let s4 = document.getElementById("s4");
            let regExp = /^[a-z0-9]\w+@[a-z0-9]+(\.com)(\.cn)?$/i;
            if (regExp.test(email)) {
                s4.innerHTML = "邮箱号码格式正确";
                s4.className = "success";
                return true;
            } else {
                s4.innerHTML = "邮箱号码格式不正确";
                s4.className = "fail";
                return false;
            }
        }

        function checkForm() {
            if (checkUsername() && checkPhone() && checkPersonId() && checkEmail()) {
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
<form action="01-引入方式.html" onsubmit="return checkForm()">
    用户名:<input type="text" id="username" onfocus="tipUsername()" onblur="checkUsername()"><span id="s1"></span><br>
    <!-- 手机号码由11位数字组成,必须以13、15、16、18、19开头 -->
    手机号:<input type="text" id="phone" onfocus="tipPhone()" onblur="checkPhone()"><span id="s2"></span><br>
    <!-- 身份证号码只能是15位或者18位字符,如果是15位,要求必须全部是数字,如果是18位,要求前17位必须全部是数字,最后一位可以是数字或者X -->
    身份证:<input type="text" id="personId" onfocus="tipPersonId()" onblur="checkPersonId()"><span id="s3"></span><br>
    <!-- 要求邮箱必须以英文字母或者数字开头,后面可以跟英文字母数字或者下划线,后面跟@符号,@符号后面跟英文字母或者数字,以.com或者.com.cn结尾 -->
    邮箱:<input type="text" id="email" onfocus="tipEmail()" onblur="checkEmail()"><span id="s4"></span><br>
    <input type="submit" value="提交">
</form>
</body>
</html>